<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源管理</title>
<link href="../css/popForm.css" rel="stylesheet" type="text/css" />
<link href="../css/tab.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../scripts/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//访问url
var url = '<%=basePath%>rest/apm/resource';
	//查询资源列表方法
	function getRes() {
		$('#showtable').html('');
		$.getJSON(url, function(data) {
			Res = data.resource;
			CreateTable(Res);
		});
	}

	//表格提交方法
	function Restab() {
		var i = document.getElementById('funNum').value;
		if (i == 1) {
			addRes();
		} else if (i == 2) {
			updRes();
		}
	}

	//弹出添加表单
	function addForm(){
		document.getElementById('funNum').value=1;
		showPopup('300px','240px');
	}
	
	//添加资源方法
	function addRes() {
		var jsonObj = jsonData();
		$.ajax({
			url : url,
			type : 'POST',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRes();
	}

	//更新资源方法
	function updRes() {
		var jsonObj = jsonData();
		$.ajax({
			url : url,
			type : 'PUT',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRes();
	}

	//删除资源方法
	function delRes(id) {
		var delurl = '<%=basePath%>rest/apm?id='+id+'&typeid=6';
		$.ajax({
			url : delurl,
			type : 'DELETE',
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getRes();
	}

	//封装json数据，为了代码清晰 
	function jsonData() {
		var id = document.getElementById('id').value;
		var protocol = document.getElementById('protocol').value;
		var uri = document.getElementById('uri').value;
		var type = document.getElementById('type').value;
		var protocolName = document.getElementById('protocolName').value;
		var ip = document.getElementById('ip').value;
		var ipNum = document.getElementById('ipNum').value;
		var port = document.getElementById('port').value;
		var belongTo = document.getElementById('belongTo').value;
		
		var jsonStr = "{";
		jsonStr += "\"id\":";
		jsonStr += "\"" + id + "\"";
		jsonStr += ",";
		jsonStr += "\"protocol\":";
		jsonStr += "\"" + protocol + "\"";
		jsonStr += ",";
		jsonStr += "\"uri\":";
		jsonStr += "\"" + uri + "\"";
		jsonStr += ",";
		jsonStr += "\"protocolName\":";
		jsonStr += "\"" + protocolName + "\"";
		jsonStr += ",";
		jsonStr += "\"ip\":";
		jsonStr += "\"" + ip + "\"";
		jsonStr += ",";
		jsonStr += "\"ipNum\":";
		jsonStr += "" + ipNum + "";
		jsonStr += ",";
		jsonStr += "\"port\":";
		jsonStr += "" + port + "";
		jsonStr += ",";
		jsonStr += "\"belongTo\":";
		jsonStr += "\"" + belongTo + "\"";
		jsonStr += ",";
		jsonStr += "\"type\":";
		jsonStr += "\"" + type + "\"";
		jsonStr += "}";
		return jsonStr;//关键在于转换。 
	}

	$(document).ready(function() {
		getRes();
	});

	//创建表格
	function CreateTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showtable"));
		var th = $("<th></th>");
		var td1 = $("<td>Id</td>");
		var td2 = $("<td>uri</td>");
		var td3 = $("<td>protocol</td>");
		var td4 = $("<td>type</td>");
		var td5 = $("<td>protocolName</td>");
		var td6 = $("<td>ip</td>");
		var td7 = $("<td>ipNum</td>");
		var td8 = $("<td>port</td>");
		var td9 = $("<td>belongTo</td>");
		var td10 = $("<td>操作</td>");
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		td6.appendTo(th);
		td7.appendTo(th);
		td8.appendTo(th);
		td9.appendTo(th);
		td10.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].id + "</td>");
			var td2 = $("<td>" + datalist[k].uri + "</td>");
			var td3 = $("<td>" + datalist[k].protocol + "</td>");
			var td4 = $("<td>" + datalist[k].type + "</td>");
			var td5 = $("<td>" + datalist[k].protocolName + "</td>");
			var td6 = $("<td>" + datalist[k].ip + "</td>");
			var td7 = $("<td>" + datalist[k].ipNum + "</td>");
			var td8 = $("<td>" + datalist[k].port + "</td>");
			var td9 = $("<td>" + datalist[k].belongTo + "</td>");
			var td10 = $("<td><a href='#' onclick=delRes('" + datalist[k].id
					+ "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			td6.appendTo(tr1);
			td7.appendTo(tr1);
			td8.appendTo(tr1);
			td9.appendTo(tr1);
			td10.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showtable").append("</table>");
	}
	
	function showOperResult(status){
		$('#operStaus').html('');
		if(status==1){
			$('#operStaus').html("<font size='3' color='red'>操作失败！</font>");
		}else if(status==2){
			$('#operStaus').html("<font size='3' color='red'>操作成功！</font>");
		}
	}
	
	//弹出更新表单
	function showUpdFormVal(obj){
		 document.getElementById('funNum').value=2;
		 
		 document.getElementById('id').value=obj.id;
		 document.getElementById('protocol').value=obj.protocol;
		 document.getElementById('uri').value=obj.uri;
		 document.getElementById('type').value=obj.type;
		 document.getElementById('protocolName').value=obj.protocolName;
		 document.getElementById('ip').value=obj.ip;
		 document.getElementById('ipNum').value=obj.ipNum;
		 document.getElementById('port').value=obj.port;
		 document.getElementById('belongTo').value=obj.belongTo;
			
		 showPopup('300px','240px');
	}
</script>

<body>
	<input type="button" onclick="getRes();" value="查询资源" />
	<input type="button" onclick="addForm();" value="添加资源" />
	<br />
	<div id="operStaus" style="width:150px;height:25px;"></div>
	<input type="hidden" id="funNum" name="funNum" />
	<div id="popDiv">
		<div id="popTitle">
			<!-- 标题div -->
			<span class="title_left">修改操作</span> <span class="title_right">
			<a href="#" onclick="hidePopup();">关闭</a> </span>
		</div>
		<!-- 表单div -->
		<div id="popForm">
		<form id="form1" name="form1">
			<table>
				<tr id="resId" style="display: none;">
					<td>ID</td>
					<td><input type="text" id="id" name="id" /></td>
				</tr>
				<tr style="display: none;">
					<td>uri</td>
					<td><input type="text" id="uri" name="uri" /></td>
				</tr>
				<tr>
					<td>protocol</td>
					<td><input type="text" id="protocol" name="protocol" /></td>
				</tr>
				<tr>
					<td>type</td>
					<td><select id="type" name="type" style="width: 150px">
							<option value="">--请选择--</option>
							<option value="node">node</option>
							<option value="service">service</option>
							<option value="cluster">cluster</option>
					</select></td>
				</tr>
				<tr>
					<td>protocolName</td>
					<td><select id="protocolName" name="protocolName"
						style="width: 150px">
							<option value="">--请选择--</option>
							<option value="HTTP">HTTP</option>
							<option value="SOAP">SOAP</option>
							<option value="TCP/IP">TCP/IP</option>
							<option value="UDP">UDP</option>
							<option value="FTP">FTP</option>
							<option value="SNMP">SNMP</option>
					</select></td>
				</tr>
				<tr>
					<td>ip</td>
					<td><input type="text" id="ip" name="ip" /></td>
				</tr>
				<tr>
					<td>ipNum</td>
					<td><input type="text" id="ipNum" name="ipNum" /></td>
				</tr>
				<tr>
					<td>port</td>
					<td><input type="text" id="port" name="port" /></td>
				</tr>
				<tr>
					<td>belongTo</td>
					<td><input type="text" id="belongTo" name="belongTo" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="提交" onclick="Restab();" />
						&nbsp;<input type="reset" value="重置" />&nbsp;<input type="button" value="关闭" onclick="hidePopup()" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
	<hr>
	<div id="showtable"></div>
</body>
<script type="text/javascript" src="../scripts/mouseMoveForm.js"></script>
</html>